<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>扫码服务</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <style>
        body {
            font-family: 'Inter', sans-serif;
        }

        .error {
            color: red;
        }
    </style>
</head>

<body class="bg-gray-100 flex justify-center items-center h-screen">
    <div class="bg-white p-8 rounded shadow-md w-full max-w-md">
        <h1 class="text-2xl font-bold mb-6 text-center">扫码服务</h1>
        <label for="scan1" class="block mb-1">扫码 1:</label>
        <input type="text" id="scan1" class="border border-gray-300 p-2 mb-4 w-full" placeholder="扫码 1" inputmode="latin">
        <label for="scan2" class="block mb-1">扫码 2:</label>
        <input type="text" id="scan2" class="border border-gray-300 p-2 w-full" placeholder="扫码 2" inputmode="latin">
        <div id="message" class="mt-4"></div>
    </div>
    <script>
        const scan1 = document.getElementById('scan1');
        const scan2 = document.getElementById('scan2');
        const message = document.getElementById('message');

        // 页面加载完成后聚焦到扫码 1
        window.addEventListener('load', () => {
            scan1.focus();
        });

        scan1.addEventListener('keydown', async function (e) {
            if (e.key === 'Enter') {
                if (this.value.length > 0) {
                    scan2.focus();
                }
            }
        });

        scan2.addEventListener('keydown', async function (e) {
            if (e.key === 'Enter') {
                if (this.value.length > 0) {
                    const data = {
                        scan1: scan1.value,
                        scan2: scan2.value
                    };
                    try {
                        const response = await fetch('/check', {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json'
                            },
                            body: JSON.stringify(data)
                        });
                        const result = await response.json();
                        if (result.match) {
                            message.textContent = '绑定成功';
                            message.classList.remove('error');
                        } else {
                            message.textContent = '请检查扫码 1 和扫码 2 是否正确';
                            message.classList.add('error');
                        }
                        if (result.match) {
                            const saveResponse = await fetch('/save', {
                                method: 'POST',
                                headers: {
                                    'Content-Type': 'application/json'
                                },
                                body: JSON.stringify(data)
                            });
                            if (saveResponse.ok) {
                                console.log('保存成功');
                                scan1.value = '';
                                scan2.value = '';
                                scan1.focus();
                            } else {
                                console.error('保存失败');
                            }
                        }
                    } catch (error) {
                        console.error('网络错误:', error);
                    }
                }
            }
        });
    </script>
</body>

</html>    